<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TabBar图标生成器</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
            background: #f5f5f5;
        }
        .container {
            max-width: 1000px;
            margin: 0 auto;
            background: white;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        .icon-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin-top: 20px;
        }
        .icon-item {
            text-align: center;
            padding: 20px;
            border: 1px solid #ddd;
            border-radius: 8px;
            background: #fafafa;
        }
        .icon-canvas {
            border: 1px solid #ccc;
            margin: 10px 0;
        }
        .download-btn {
            background: #007bff;
            color: white;
            border: none;
            padding: 8px 16px;
            border-radius: 4px;
            cursor: pointer;
            margin: 5px;
        }
        .download-btn:hover {
            background: #0056b3;
        }
        .generate-all {
            background: #28a745;
            color: white;
            border: none;
            padding: 12px 24px;
            border-radius: 6px;
            cursor: pointer;
            font-size: 16px;
            margin: 20px 0;
        }
        .generate-all:hover {
            background: #218838;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>TabBar图标生成器</h1>
        <p>点击下方按钮生成小程序所需的tabBar图标</p>
        
        <button class="generate-all" onclick="generateAllIcons()">生成所有图标</button>
        
        <div class="icon-grid">
            <div class="icon-item">
                <h3>首页图标</h3>
                <canvas id="homeCanvas" class="icon-canvas" width="81" height="81"></canvas>
                <canvas id="homeActiveCanvas" class="icon-canvas" width="81" height="81"></canvas>
                <br>
                <button class="download-btn" onclick="downloadIcon('homeCanvas', 'home.png')">下载 home.png</button>
                <button class="download-btn" onclick="downloadIcon('homeActiveCanvas', 'home-active.png')">下载 home-active.png</button>
            </div>
            
            <div class="icon-item">
                <h3>好物剪影图标</h3>
                <canvas id="auctionCanvas" class="icon-canvas" width="81" height="81"></canvas>
                <canvas id="auctionActiveCanvas" class="icon-canvas" width="81" height="81"></canvas>
                <br>
                <button class="download-btn" onclick="downloadIcon('auctionCanvas', 'auction.png')">下载 auction.png</button>
                <button class="download-btn" onclick="downloadIcon('auctionActiveCanvas', 'auction-active.png')">下载 auction-active.png</button>
            </div>
            
            <div class="icon-item">
                <h3>设置图标</h3>
                <canvas id="settingsCanvas" class="icon-canvas" width="81" height="81"></canvas>
                <canvas id="settingsActiveCanvas" class="icon-canvas" width="81" height="81"></canvas>
                <br>
                <button class="download-btn" onclick="downloadIcon('settingsCanvas', 'settings.png')">下载 settings.png</button>
                <button class="download-btn" onclick="downloadIcon('settingsActiveCanvas', 'settings-active.png')">下载 settings-active.png</button>
            </div>
            
            <div class="icon-item">
                <h3>直播图标</h3>
                <canvas id="liveCanvas" class="icon-canvas" width="81" height="81"></canvas>
                <canvas id="liveActiveCanvas" class="icon-canvas" width="81" height="81"></canvas>
                <br>
                <button class="download-btn" onclick="downloadIcon('liveCanvas', 'live.png')">下载 live.png</button>
                <button class="download-btn" onclick="downloadIcon('liveActiveCanvas', 'live-active.png')">下载 live-active.png</button>
            </div>
            
            <div class="icon-item">
                <h3>个人中心图标</h3>
                <canvas id="profileCanvas" class="icon-canvas" width="81" height="81"></canvas>
                <canvas id="profileActiveCanvas" class="icon-canvas" width="81" height="81"></canvas>
                <br>
                <button class="download-btn" onclick="downloadIcon('profileCanvas', 'profile.png')">下载 profile.png</button>
                <button class="download-btn" onclick="downloadIcon('profileActiveCanvas', 'profile-active.png')">下载 profile-active.png</button>
            </div>
        </div>
    </div>

    <script>
        // 生成所有图标
        function generateAllIcons() {
            generateHomeIcon();
            generateAuctionIcon();
            generateSettingsIcon();
            generateLiveIcon();
            generateProfileIcon();
        }

        // 生成首页图标
        function generateHomeIcon() {
            const canvas = document.getElementById('homeCanvas');
            const activeCanvas = document.getElementById('homeActiveCanvas');
            const ctx = canvas.getContext('2d');
            const activeCtx = activeCanvas.getContext('2d');
            
            // 未选中状态 - 灰色
            ctx.fillStyle = '#999';
            ctx.strokeStyle = '#999';
            drawHomeIcon(ctx);
            
            // 选中状态 - 主题色
            activeCtx.fillStyle = '#ff4757';
            activeCtx.strokeStyle = '#ff4757';
            drawHomeIcon(activeCtx);
        }

        // 绘制房子图标
        function drawHomeIcon(ctx) {
            ctx.lineWidth = 3;
            
            // 房子主体
            ctx.beginPath();
            ctx.moveTo(40, 25);
            ctx.lineTo(25, 35);
            ctx.lineTo(25, 60);
            ctx.lineTo(55, 60);
            ctx.lineTo(55, 35);
            ctx.closePath();
            ctx.stroke();
            
            // 屋顶
            ctx.beginPath();
            ctx.moveTo(25, 35);
            ctx.lineTo(40, 20);
            ctx.lineTo(55, 35);
            ctx.stroke();
            
            // 门
            ctx.beginPath();
            ctx.rect(35, 45, 10, 15);
            ctx.stroke();
            
            // 窗户
            ctx.beginPath();
            ctx.rect(30, 35, 8, 8);
            ctx.rect(42, 35, 8, 8);
            ctx.stroke();
        }

        // 生成好物剪影图标
        function generateAuctionIcon() {
            const canvas = document.getElementById('auctionCanvas');
            const activeCanvas = document.getElementById('auctionActiveCanvas');
            const ctx = canvas.getContext('2d');
            const activeCtx = activeCanvas.getContext('2d');
            
            // 未选中状态 - 灰色
            ctx.fillStyle = '#999';
            ctx.strokeStyle = '#999';
            drawAuctionIcon(ctx);
            
            // 选中状态 - 主题色
            activeCtx.fillStyle = '#ff4757';
            activeCtx.strokeStyle = '#ff4757';
            drawAuctionIcon(activeCtx);
        }

        // 绘制拍卖/商品图标
        function drawAuctionIcon(ctx) {
            ctx.lineWidth = 3;
            
            // 商品盒子
            ctx.beginPath();
            ctx.rect(20, 30, 40, 30);
            ctx.stroke();
            
            // 盒子盖子
            ctx.beginPath();
            ctx.moveTo(20, 30);
            ctx.lineTo(25, 25);
            ctx.lineTo(65, 25);
            ctx.lineTo(60, 30);
            ctx.stroke();
            
            // 价格标签
            ctx.beginPath();
            ctx.arc(50, 45, 8, 0, 2 * Math.PI);
            ctx.stroke();
            
            // 价格符号
            ctx.font = '12px Arial';
            ctx.textAlign = 'center';
            ctx.fillText('¥', 50, 49);
            
            // 闪光效果
            ctx.beginPath();
            ctx.moveTo(25, 35);
            ctx.lineTo(30, 30);
            ctx.stroke();
        }

        // 生成设置图标
        function generateSettingsIcon() {
            const canvas = document.getElementById('settingsCanvas');
            const activeCanvas = document.getElementById('settingsActiveCanvas');
            const ctx = canvas.getContext('2d');
            const activeCtx = activeCanvas.getContext('2d');
            
            // 未选中状态 - 灰色
            ctx.fillStyle = '#999';
            ctx.strokeStyle = '#999';
            drawSettingsIcon(ctx);
            
            // 选中状态 - 主题色
            activeCtx.fillStyle = '#ff4757';
            activeCtx.strokeStyle = '#ff4757';
            drawSettingsIcon(activeCtx);
        }

        // 绘制设置图标
        function drawSettingsIcon(ctx) {
            ctx.lineWidth = 3;
            
            // 齿轮外圈
            ctx.beginPath();
            ctx.arc(40, 40, 25, 0, 2 * Math.PI);
            ctx.stroke();
            
            // 齿轮内圈
            ctx.beginPath();
            ctx.arc(40, 40, 15, 0, 2 * Math.PI);
            ctx.stroke();
            
            // 齿轮齿
            for (let i = 0; i < 8; i++) {
                const angle = (i * Math.PI) / 4;
                const x1 = 40 + 25 * Math.cos(angle);
                const y1 = 40 + 25 * Math.sin(angle);
                const x2 = 40 + 35 * Math.cos(angle);
                const y2 = 40 + 35 * Math.sin(angle);
                
                ctx.beginPath();
                ctx.moveTo(x1, y1);
                ctx.lineTo(x2, y2);
                ctx.stroke();
            }
            
            // 中心点
            ctx.beginPath();
            ctx.arc(40, 40, 3, 0, 2 * Math.PI);
            ctx.fill();
        }

        // 生成直播图标
        function generateLiveIcon() {
            const canvas = document.getElementById('liveCanvas');
            const activeCanvas = document.getElementById('liveActiveCanvas');
            const ctx = canvas.getContext('2d');
            const activeCtx = activeCanvas.getContext('2d');
            
            // 未选中状态 - 灰色
            ctx.fillStyle = '#999';
            ctx.strokeStyle = '#999';
            drawLiveIcon(ctx);
            
            // 选中状态 - 主题色
            activeCtx.fillStyle = '#ff4757';
            activeCtx.strokeStyle = '#ff4757';
            drawLiveIcon(activeCtx);
        }

        // 绘制直播图标
        function drawLiveIcon(ctx) {
            ctx.lineWidth = 3;
            
            // 摄像头主体
            ctx.beginPath();
            ctx.rect(25, 30, 30, 20);
            ctx.stroke();
            
            // 摄像头镜头
            ctx.beginPath();
            ctx.arc(40, 40, 8, 0, 2 * Math.PI);
            ctx.stroke();
            
            // 摄像头支架
            ctx.beginPath();
            ctx.moveTo(40, 50);
            ctx.lineTo(40, 60);
            ctx.lineTo(35, 65);
            ctx.lineTo(45, 65);
            ctx.closePath();
            ctx.stroke();
            
            // 信号波
            ctx.beginPath();
            ctx.arc(40, 40, 12, 0, 2 * Math.PI);
            ctx.stroke();
        }

        // 生成个人中心图标
        function generateProfileIcon() {
            const canvas = document.getElementById('profileCanvas');
            const activeCanvas = document.getElementById('profileActiveCanvas');
            const ctx = canvas.getContext('2d');
            const activeCtx = activeCanvas.getContext('2d');
            
            // 未选中状态 - 灰色
            ctx.fillStyle = '#999';
            ctx.strokeStyle = '#999';
            drawProfileIcon(ctx);
            
            // 选中状态 - 主题色
            activeCtx.fillStyle = '#ff4757';
            activeCtx.strokeStyle = '#ff4757';
            drawProfileIcon(activeCtx);
        }

        // 绘制个人中心图标
        function drawProfileIcon(ctx) {
            ctx.lineWidth = 3;
            
            // 头部
            ctx.beginPath();
            ctx.arc(40, 30, 12, 0, 2 * Math.PI);
            ctx.stroke();
            
            // 身体
            ctx.beginPath();
            ctx.arc(40, 55, 18, 0, 2 * Math.PI);
            ctx.stroke();
            
            // 眼睛
            ctx.beginPath();
            ctx.arc(36, 28, 2, 0, 2 * Math.PI);
            ctx.arc(44, 28, 2, 0, 2 * Math.PI);
            ctx.fill();
        }

        // 下载图标
        function downloadIcon(canvasId, filename) {
            const canvas = document.getElementById(canvasId);
            const link = document.createElement('a');
            link.download = filename;
            link.href = canvas.toDataURL();
            link.click();
        }

        // 页面加载时生成所有图标
        window.onload = function() {
            generateAllIcons();
        };
    </script>
</body>
</html> 